<template>
    <div class="box">
        <div class="title">意见建议(柱形图)</div>
        <v-chart :option="option" autoresize class="charts"></v-chart>
    </div>
</template>

<script>
export default {
    props: ["data", "name", "baifenbi"],
    watch: {
        data: {
            deep: true,
            handler() {
                this.option.series = this.data
                this.option.xAxis.data = this.name.map(item =>
                    item.name
                )
                let nameArr = []
                this.data.forEach(item => {
                    nameArr.push(item.name)
                });
                this.option.legend.data = nameArr
            }
        }
    },
    data() {
        return {
            option: {
                grid: {
                    top: "15%",
                    left: "5%",
                    right: "1%",
                },
                legend: {
                    type: "plain",
                    data: ['认同', '不认同'],
                    left: "20%",
                    top: 0
                },
                xAxis: {
                    type: 'category',
                    // data: ['收费员服务', 'ETC相关', '高速公路通行费', '交通拥堵', '“高速映山红”品牌宣贯', '发卡机', '收费设备', '道路施工', '路面状况', '公路标志', '防护设施', '应急救援', '路况信息', '客服服务'],
                    data: [],
                    axisLine: {
                        lineStyle: {
                            color: "#222"
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        formatter: function (value, index) {
                            var newParamsName = "";
                            var paramsNameNumber = value.length;
                            var provideNumber = 4;  //一行显示几个字
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                            if (paramsNameNumber > provideNumber) {
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = "";
                                    var start = p * provideNumber;
                                    var end = start + provideNumber;
                                    if (p == rowNumber - 1) {
                                        tempStr = value.substring(start, paramsNameNumber);
                                    } else {
                                        tempStr = value.substring(start, end) + "\n";
                                    }
                                    newParamsName += tempStr;
                                }
                            } else {
                                newParamsName = value;
                            }
                            return `\n${newParamsName}`
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    name: "(次数)"
                },
                series: [
                    // {
                    //     data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130],
                    //     type: 'bar',
                    //     name: "满意",
                    //     color: "#01BDA3",
                    //     barWidth: 20,
                    // },
                    // {
                    //     data: [120, 200, 150, 80, 70, 110, 130, 200, 150, 80, 70, 110, 130, 130],
                    //     type: 'bar',
                    //     name: "一般",
                    //     color: "#F3B023",
                    //     barWidth: 20

                    // },
                    // {
                    //     data: [120, 200, 150, 80, 70, 110, 130, 200, 150, 80, 70, 110, 130, 130],
                    //     type: 'bar',
                    //     name: "不满意",
                    //     color: "#FF5620",
                    //     barWidth: 20

                    // }
                ]
            },
            nameArr: []
        }
    },
    mounted() {
        // this.option.series = this.data
        this.data.forEach(item => {
            item.label = {
                show: true,
                position: 'top',
                formatter: (params) => {
                    let { dataIndex, seriesName, value } = params
                    let baifenValue = this.baifenbi.find(item => item.name == seriesName)
                    // this.baifenbi.forEach(item => {
                    //     if (item.name == params.seriesName) {
                    //         item.value.forEach(i => {
                    //             a = `${params.value}人\n0%`
                    //         })
                    //     }
                    // })
                    return `${value}人\n${baifenValue.value[dataIndex]}%`
                }
            }
        })
        this.option.series = this.data
        this.option.xAxis.data = this.name.map(item =>
            item.name
        )

        this.option.legend.data = this.data.map(item =>
            item.name
        );
    }
}
</script>

<style scoped>
.title {
    font-size: 2rem;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #222222;
    padding: 1.7rem 1.5rem;
    box-sizing: border-box;
}
.box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.charts {
    width: 100%;
    height: 100%;
}
</style>